<template>
  <div
    v-loading="state.loading"
    :element-loading-background="
      themeType === 'night' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)'
    "
  >
    <div
      v-if="activeTab === 3"
      class="cus-select radius quoteline mb-16 lever-input flex js-sp align-center"
    >
      <el-input
        :placeholder="$t('deal.entrigger')"
        v-model="state.orderParam.lever_trigger_price"
        @input="trBuyTriggerPrice"
        :controls="false"
        placeholder-color="red"
        class="customer-input quotet3"
        type="text"
      />
      <!-- <el-input-number
        :controls="false"
        :placeholder="$t('deal.entrigger')"
        v-model="state.orderParam.lever_trigger_price"
      ></el-input-number> -->
      <span class="text-12 quotet3">USDT</span>
    </div>
    <div
      v-if="activeTab != 1"
      class="cus-select radius quoteline mb-16 lever-input flex js-sp align-center"
    >
      <el-input
        v-model.number="state.orderParam.lever_open_price"
        type="number"
        :placeholder="$t('deal.enprice')"
        @input="countSlide('lever_open')"
        @change="nullorNot"
        :min="0"
        @mousewheel.prevent
        placeholder-color="red"
        class="customer-input quotet3"
      ></el-input>
      <!-- <el-input-number
        :placeholder="$t('deal.enprice')"
        :controls="false"
        @blur="countSlide"
        :precision="gettrading.stock_currency_accuracy"
        v-model="state.orderParam.lever_open_price"
      ></el-input-number> -->
      <span class="text-12 quotet3">USDT</span>
    </div>
    <div
      v-if="activeTab === 1"
      class="cus-select radius quoteline mb-16 lever-input flex js-sp align-center"
    >
      <el-input
        type="number"
        :placeholder="$t('stock.deal')"
        @input="countSlide('lever_open')"
        @change="nullorNot"
        :disabled="true"
        @mousewheel.prevent
        placeholder-color="red"
        class="customer-input quotet3"
      ></el-input>
    </div>
    <div
      class="cus-select quoteline radius flex js-sp align-center mb-20"
      @click="state.isSelect = !state.isSelect"
      v-clickout="closeSelect"
    >
      <span class="quotet3">{{ $t("lever.multiple") }}</span>
      <div class="select-num">
        <span class="family-d quotet3 text-12"
          >{{ state.orderParam.lever_multiple }}X</span
        >
        <i
          class="el-icon-arrow-down quotet2 text-14"
          v-if="!state.isSelect"
        ></i>
        <i class="el-icon-arrow-up quotet2 text-14" v-else></i>
        <ul class="num-box quotebg radius" v-if="state.isSelect">
          <li
            class="num quotet2 text-14"
            v-for="(item, index) in gettrading.lever_multiple_array"
            :key="index"
            @click.stop="selectMulti(item)"
          >
            {{ item }}X
          </li>
        </ul>
      </div>
    </div>
    <div
      class="cus-select mb-4 radius quoteline lever-input flex js-sp align-center"
    >
      <!-- <el-input-number
        :placeholder="$t('deal.ennum')"
        :controls="false"
        @blur="countSlide"
        :precision="0"
        v-model="state.orderParam.lever_hand"
      ></el-input-number>-->
      <el-input
        v-model.number="state.orderParam.lever_hand"
        type="number"
        :placeholder="$t('deal.ennum')"
        @input="countSlide('lever_hand')"
        :min="0"
        @mousewheel.prevent
        placeholder-color="red"
        class="customer-input quotet3"
      ></el-input>
      <span class="text-12 quotet3">{{ $t("lever.hand") }}</span>
    </div>
    <div class="quotet3 text-10 text-left mb-16">
      (1{{ $t("lever.hand") }}={{
        gettrading?.lever_hand_number + $t("stock.share")
      }})
    </div>
    <div class="mb-16 p-5">
      <el-slider
        v-model="state.slideValue"
        :format-tooltip="formatTooltip"
        @change="slideChange"
      ></el-slider>
    </div>
    <div class="text-left mb-16">
      <el-checkbox v-model="state.checked">
        <span class="text-10 quotet3">
          {{ $t("exchange.stopLoss") }}
        </span>
        <el-tooltip class="item" effect="dark" placement="top">
          <template #content>
            <div style="width: 300px;">
              <div>
                {{ $t("stock.profitPriceTip") }}
              </div>
              <div>
                {{ $t("stock.stopPriceTip") }}
              </div>
            </div>
          </template>
          <svg-icon
            data-_icon-name="ic_invite_why"
            class="ml-8 text-14 share-color"
          ></svg-icon>
        </el-tooltip>
      </el-checkbox>
    </div>
    <div
      v-if="state.checked"
      class="cus-select radius quoteline mb-16 lever-input flex js-sp align-center"
    >
      <el-input
        :placeholder="$t('exchange.takeProfitPrice')"
        v-model="state.orderParam.stop_win_price"
      ></el-input>
      <span class="text-12 quotet3">USDT</span>
    </div>
    <div
      v-if="state.checked"
      class="cus-select radius quoteline mb-20 lever-input flex js-sp align-center"
    >
      <el-input
        :placeholder="$t('exchange.stopPrice')"
        v-model="state.orderParam.stop_lose_price"
      ></el-input>
      <span class="text-12 quotet3">USDT</span>
    </div>
    <!-- 登录状态 -->
    <el-button
      v-if="islogin && !open_stock_contract_trading && !state.isopenlever"
      style="width:100%;height:46px"
      type="primary"
      @click="open"
      class="login-btn mb-8"
      >{{ $t("lever.openlever") }}</el-button
    >
    <div
      class="btnbox share-color mb-8 point"
      v-if="islogin && state.isopenlever"
    >
      <div
        v-show="doTab === 1"
        class="btn green-bg"
        @click="transaction(1)"
        :class="isRestDate ? 'btn-disabled' : ''"
      >
        {{
          isRestDate
            ? $t("stock.closed")
            : $t("exchange.buy") + "/" + $t("exchange.doMore")
        }}
      </div>
      <!-- 保证金 -->
      <!-- <div class="mb-13">
        <div class="flex quotet3 text-10 mb-4">
          <span class>{{ $t("exchange.margin") }}</span>
          <span class="color_42 text-bolder block ml-8"
            >{{ state.margin }}USDT</span
          >
        </div>
        <div class="flex js-sp quotet2 family-d text-10 text-bolder">
        <span class>{{ state.margin }}USDT</span>
      </div>
      </div> -->
      <div
        v-show="doTab === 2"
        class="btn red-bg"
        @click="transaction(2)"
        :class="isRestDate ? 'btn-disabled' : ''"
      >
        {{
          isRestDate
            ? $t("stock.closed")
            : $t("exchange.sell") + "/" + $t("exchange.short")
        }}
      </div>
    </div>
    <!-- 未登录 -->
    <!-- <div
      class="tralation-btn islogin text-12 flex align-center js-ct mb-32 radius"
      v-else
    ></div> -->
    <div
      class="tralation-btn islogin text-12 flex align-center js-ct mb-32 radius text-bold radius-100"
      v-if="!islogin"
    >
      <router-link to="/login" class="point">{{
        $t("login.login")
      }}</router-link>
      <div class="color_42 lr-5">{{ $t("login.or") }}</div>
      <router-link to="/register" class=" point">{{
        $t("register.register")
      }}</router-link>
      <!-- <router-link
        to="/login"
        class=""
      >
        {{ $t("login.loginnOrRegistered") }}
      </router-link> -->
    </div>
    <!-- 保证金 -->
    <div class="mb-32">
      <div class="flex quotet3 text-10 mg-bt-xs">
        <span class>{{ $t("exchange.margin") }}</span>
        <span class="color_42 text-bolder block ml-8"
          >{{ state.margin }}USDT</span
        >
      </div>
      <div class="flex js-sp mb-12" v-if="islogin">
        <div class="text-10">
          <span class="quotet3" style="margin-inline-end:8px">
            {{ $t("deal.available") }}
          </span>
          <span class="family-d color_42 text-bolder"
            >{{ $currency(leverInfo?.lever_balance) }} USDT</span
          >
        </div>
        <img
          v-if="!virtual_wallet"
          @click="state.dialogHuazhuan = true"
          src="@/assets/images/order.png"
          class="order-icon"
          alt
        />
      </div>
      <!-- <div
        v-if="state.follow_status"
        class="btn text-login border radius point text-bolder"
        @click="toPath('/documentary')"
      >
        {{ $t("stock.oneClickCopy") }}
      </div> -->
      <!-- <div class="flex js-sp quotet2 family-d text-10 text-bolder">
        <span class>{{ state.margin }}USDT</span>
      </div> -->
    </div>
    <div class="text-14 text-left color_42 text-bold mb-8">
      {{ $t("lever.ratio") }}
    </div>
    <div class="flex js-sp align-center ">
      <div class="text-8 quotet3 text-left mb-4">{{ $t("lever.ratio") }}</div>
      <div class="text-10 text-green text-bolder mb-8 text-left family-d">
        {{ leverInfo?.earnest_money_rate }}%
      </div>
    </div>
    <div class="mb-32">
      <div class="flex js-sp family-d text-10 mb-8">
        <span class="quotet3">{{ $t("lever.maintenance") }}</span>
        <span class="color_42 text-bolder family-d"
          >{{ $currency(leverInfo?.maintain_earnest_money) }} USDT</span
        >
      </div>
      <div class="flex js-sp family-d text-10">
        <span class="quotet3">{{ $t("lever.balance") }}</span>
        <span class="color_42 text-bolder family-d"
          >{{ $currency(leverInfo?.earnest_money_balance) }} USDT</span
        >
      </div>
    </div>
    <!-- <div v-if="!virtual_wallet">
      <div class="text-14 text-left color_42 text-bold mb-20">
        {{ $t("lever.assets") }}
      </div>
      <div class="flex align-center js-sp">
        <div class="activetab point text-login text-12 flex-grow-1">入金</div>
        <div class="activetab point text-login text-12 flex-grow-1 mg-lf-xs">
          汇兑
        </div>
      </div>
      <div class="buycount text-bold">
        <div
          class="btn login-btn quotet4"
          @click="jump"
          v-if="state.fiat_currency_transaction_status"
        >
          {{ $t("newTheme.BuyCoins") }}
        </div>
        <div class="btn text-login border radius point" @click="onTransfer">
          {{ $t("lever.transfer") }}
        </div>
      </div>
    </div> -->
    <el-dialog
      :title="$t('assets.fundTransfer')"
      v-if="state.dialogHuazhuan"
      v-model="state.dialogHuazhuan"
      width="400px"
    >
      <Huazhuan
        :downplace="true"
        :type="2013"
        @close="state.dialogHuazhuan = false"
        @getbalance="getbalance"
      />
    </el-dialog>
    <VerifiedBox
      :text="$t('formTip.certificationTip1')"
      :dialog="state.dialogVerfiedTip"
      :type="state.type"
      @onconfirm="onConfirm"
      @viewSafeStatus="onConfirm"
      @oncancer="onCancel"
    />
    <!-- 法币交易三方 -->
    <ThirdFiatBox
      @oncancer="state.thirDialog = false"
      @onconfirm="state.thirDialog = false"
      :dialog="state.thirDialog"
    ></ThirdFiatBox>
  </div>
</template>

<script>
import { onMounted, reactive, computed, watch, ref } from "vue";
import { stockOrderLeverMakeOrder } from "@/api/stock-trading";
import { demostockOrderLeverMakeOrder } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import Huazhuan from "@/components/personModel/assets/huazhuan.vue";
import { useI18n } from "vue-i18n";
import { getConfig } from "@/api/user";
import { decimalDigitsInputFilter, toBeNumber } from "@/utils/common";
import { exceptFix, rideFix, addFix } from "@/utils/precisionMath";
import VerifiedBox from "@/components/verifiedBox/index.vue";
import { useRouter } from "vue-router";
import ThirdFiatBox from "@/components/homeModel/thirdFiatBox.vue";
import { stockOrderLeverOpenLever } from "@/api/stock-trading";
import useProtocolSetting from "@/commonapi/useProtocolSetting";

export default {
  props: {
    activeTab: Number, //1市价2限价3止盈止损
    islogin: Boolean,
    leverInfo: Object,
    nowprice: Number,
    lever_multiple: Number,
    isRestDate: Boolean,
    doTab: Number, //1做多2、做空
  },
  emits: ["placeOrder", "getleverInfo", "refresh", "openlever"],
  components: { Huazhuan, VerifiedBox, ThirdFiatBox },
  setup(props, { emit }) {
    const $store = useStore();
    const { t } = useI18n();
    const state = reactive({
      type: 0,
      isSelect: false,
      loading: false,
      orderParam: {
        lever_multiple: 0,
      },
      slideValue: 0,
      checked: false, //是否开启止盈止损
      margin: 0, //保证金
      currencynum: 0, //约等于多少币
      dialogHuazhuan: false, //划转弹窗
      isNull: true,
      dialogVerfiedTip: false,
      follow_status: false,
      fiat_currency_transaction_status: false, //法币交易开关，买币开关
      systemInfos: {},
      isopenlever: $store.state.user.userInfo
        ? $store.state.user.userInfo.user_stock_lever_status
        : false,
      thirDialog: false,
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const $router = useRouter();
    const gettrading = computed(() => {
      return $store.state.exchange.stock_lever_data;
    });
    const themeType = computed(() => $store.state.exchange.theme);
    const formatTooltip = (val) => {
      return val + "%";
    };
    const loading = ref(false);
    // 获取协议状态
    const { open_stock_contract_trading } = useProtocolSetting();
    watch(
      () => $store.state.user.userInfo?.user_stock_lever_status,
      (val) => {
        state.isopenlever = val || false;
      }
    );
    watch(
      () => gettrading.value?.id,
      () => {
        state.slideValue = 0;
        state.orderParam.lever_hand = null;
      }
    );
    watch(
      () => gettrading.value,
      () => {
        setTimeout(() => {
          state.orderParam.lever_open_price = decimalDigitsInputFilter(
            props.nowprice,
            gettrading.value?.stock_currency_accuracy
          );
          state.orderParam.lever_multiple =
            gettrading.value?.lever_multiple_array[0];
        }, 1500);
      }
    );
    // 计算保证金
    watch(
      () => [
        state.orderParam.lever_open_price,
        state.orderParam.lever_hand,
        state.orderParam.lever_multiple,
      ],
      (data) => {
        if (data[1] >= 0) {
          state.currencynum = toBeNumber(
            rideFix(data[1], gettrading.value?.lever_hand_number) + ""
          );
        } else {
          state.currencynum = 0;
        }
        if (data[0] && data[1] && data[2]) {
          state.margin = decimalDigitsInputFilter(
            toBeNumber(
              (Number(data[0]) *
                Number(data[1]) *
                gettrading.value.lever_hand_number) /
                data[2] +
                ""
            ),
            gettrading.value?.stock_currency_accuracy
          );
          // state.margin = toBeNumber(
          //   exceptFix(
          //     rideFix(
          //       rideFix(Number(data[0]), Number(data[1])),
          //       gettrading.value?.lever_hand_number
          //     ),
          //     data[2]
          //   ) + ""
          // );
        }
      }
    );
    watch(props, (val) => {
      if (props.activeTab === 1) {
        state.orderParam.lever_open_price = decimalDigitsInputFilter(
          val.nowprice,
          gettrading.value?.stock_currency_accuracy
        );
      } else {
        if (!state.orderParam.lever_open_price && state.isNull) {
          state.orderParam.lever_open_price = decimalDigitsInputFilter(
            val.nowprice,
            gettrading.value?.stock_currency_accuracy
          );
        }
      }
    });
    // watch(
    //   () => props.lever_multiple,
    //   (val) => {
    //     if (val) {
    //       state.orderParam.lever_multiple = val;
    //     }
    //   }
    // );
    watch(
      () => props.activeTab,
      (val) => {
        if (val) {
          state.orderParam.lever_open_price = null;
          state.isNull = true;
          state.orderParam.lever_open_price = decimalDigitsInputFilter(
            props.nowprice,
            gettrading.value?.stock_currency_accuracy
          );
        }
      }
    );
    /**
     * methods
     */
    onMounted(() => {
      if (gettrading.value?.lever_multiple_array) {
        state.orderParam.lever_multiple =
          gettrading.value?.lever_multiple_array[0];
      }
      getSysConfig();
    });
    const getSysConfig = () => {
      getConfig().then((res) => {
        if (res.code === 200) {
          state.systemInfos = res.data;
          getConfigInfo();
        }
      });
    };

    const jump = () => {
      console.log(props.islogin);
      if (props.islogin) {
        if (state.easy_buy_type === 2) {
          // 客服代码
          // zE.activate();
        } else if (state.easy_buy_type === 1) {
          const url = state.url;
          const a = document.createElement("a");
          a.target = "_blank";
          a.href = url;
          a.click();
        } else if (state.easy_buy_type === 3) {
          $router.push("/fiat");
        } else if (state.easy_buy_type === 4) {
          state.thirDialog = true;
        }
      } else {
        $router.push("/login");
      }
    };
    const toPath = (url) => {
      if (url === "/documentary") {
        $router.push(url + "?from=lever");
      } else {
        $router.push(url);
      }
    };
    const getConfigInfo = () => {
      let list = state.systemInfos;
      list.forEach((ele) => {
        if (ele.key == "easy_buy_type") {
          state.easy_buy_type = ele.value;
        }
        if (ele.key == "easy_buy_url") {
          state.url = ele.value;
        }
        if (ele.key == "fiat_currency_transaction_status") {
          state.fiat_currency_transaction_status = ele.value;
        }
        if (ele.key == "follow_status") {
          state.follow_status = ele.value;
        }
      });
    };
    const onTransfer = () => {
      if (props.islogin) {
        state.dialogHuazhuan = true;
      } else {
        $router.push("/login");
      }
    };
    const getbalance = () => {
      emit("getleverInfo");
    };
    const nullorNot = (val) => {
      if (val) {
        state.isNull = false;
      } else {
        state.isNull = false;
      }
    };
    //手续费比例
    const rate = computed(() => {
      return props.activeTab === 1
        ? gettrading.value.lever_taker_fee
        : gettrading.value.lever_maker_fee;
    });
    // 滑动滑块
    const slideChange = (val) => {
      if (!$store.state.user.token) {
        return;
      }
      if (!state.orderParam.lever_multiple) {
        ElMessage.error(t("lever.selectmultiple"));
        return;
      }
      const lever_open_price = state.orderParam.lever_open_price || 0;
      //手数=可用*倍数/单价/一手等于多少个
      state.orderParam.lever_hand = Math.floor(
        exceptFix(
          rideFix(
            exceptFix(
              exceptFix(
                rideFix(
                  exceptFix(
                    props.leverInfo.lever_balance,
                    addFix(
                      1,
                      rideFix(rate.value, state.orderParam.lever_multiple)
                    )
                  ),
                  state.orderParam.lever_multiple
                ),
                lever_open_price
              ),
              gettrading.value.lever_hand_number
            ),
            val
          ),
          100
        )
      );
      // state.orderParam.lever_hand = Math.floor(
      //   (((props.leverInfo.lever_balance * state.orderParam.lever_multiple) /
      //     lever_open_price /
      //     gettrading.value?.lever_hand_number) *
      //     Number(val)) /
      //     100
      // );
    };
    const trBuyTriggerPrice = (val) => {
      if (val) {
        let tempV = toBeNumber(val);
        state.orderParam.lever_trigger_price = decimalDigitsInputFilter(
          tempV,
          gettrading.value.stock_currency_accuracy
        );
      }
    };
    // 计算滑块
    const countSlide = (type = "") => {
      if (type === "lever_hand") {
        if (state.orderParam.lever_hand < 0) {
          state.orderParam.lever_hand = 0;
        } else if (state.orderParam.lever_hand > 0) {
          state.orderParam.lever_hand = parseInt(state.orderParam.lever_hand);
        }
      }
      if (type === "lever_open") {
        state.isNull = false;
        if (state.orderParam.lever_open_price > 0) {
          let openPrice = state.orderParam.lever_open_price;
          state.orderParam.lever_open_price = decimalDigitsInputFilter(
            toBeNumber(openPrice + ""),
            gettrading.value.stock_currency_accuracy
          );
        }
      }
      if (!$store.state.user.token) {
        return;
      }
      if (!state.orderParam.lever_multiple) {
        ElMessage.error(t("lever.selectmultiple"));
        return;
      }
      if (!state.orderParam.lever_hand) {
        return;
      }
      const lever_open_price = state.orderParam.lever_open_price || 0;
      //手数=可用*倍数/单价/一手等于多少个
      state.slideValue = Math.floor(
        exceptFix(
          state.orderParam.lever_hand,
          exceptFix(
            exceptFix(
              exceptFix(
                rideFix(
                  props.leverInfo.lever_balance,
                  state.orderParam.lever_multiple
                ),
                lever_open_price
              ),
              gettrading.value?.lever_hand_number
            ),
            100
          )
        )
      );
    };

    const onConfirm = () => {
      state.dialogVerfiedTip = false;
      $router.push("/person/Authentication");
    };
    const onCancel = () => {
      state.dialogVerfiedTip = false;
    };
    //是否需要实名
    const isVerified = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "verify_switch") {
          if (
            ele.value[8] &&
            $store.state.user.securityInfo.user_auth_level !== 2
          ) {
            if ($store.state.user.securityInfo.user_auth_level !== 4) {
              state.type = 1;
            }
            flag = true;
          }
        }
      });
      return flag;
    });
    // 交易下单
    const transaction = (type) => {
      if (isVerified.value) {
        state.dialogVerfiedTip = true;
        return false;
      }
      if (props.isRestDate) {
        return false;
      }
      if (!state.orderParam.lever_multiple) {
        ElMessage.error(t("lever.selectmultiple"));
        return;
      }
      if (props.activeTab !== 1) {
        if (!state.orderParam.lever_open_price) {
          ElMessage.error(t("deal.enCommissionPrice"));
          return;
        }
      }
      if (props.activeTab === 3) {
        if (!state.orderParam.lever_trigger_price) {
          ElMessage.error(t("deal.entrigger"));
          return;
        }
      }
      if (!state.orderParam.lever_hand) {
        ElMessage.error(t("deal.ennum"));
        return;
      }
      if (state.checked) {
        //如果开启止盈止损 两项都不填提示他填一项
        if (
          !state.orderParam.stop_win_price &&
          !state.orderParam.stop_lose_price
        ) {
          ElMessage.error(t("lever.enprofit"));
          return;
        }
        // 如果开启止盈止损，填的止盈价和止损价不能为0
        if (
          state.orderParam.stop_win_price &&
          Number(state.orderParam.stop_win_price) === 0
        ) {
          ElMessage.error(t("lever.profitPriceTip"));
          return;
        }
        if (
          state.orderParam.stop_lose_price &&
          Number(state.orderParam.stop_lose_price) === 0
        ) {
          ElMessage.error(t("lever.lossPriceTip"));
          return;
        }
        if (type === 1) {
          //止盈价需大于开仓价
          if (
            Number(state.orderParam.stop_win_price) &&
            Number(state.orderParam.stop_win_price) <
              state.orderParam.lever_open_price
          ) {
            ElMessage.error(t("exchange.greaterTip1"));
            return;
          }
          // 止损价需小于开仓价
          if (
            Number(state.orderParam.stop_lose_price) &&
            Number(state.orderParam.stop_lose_price) >
              state.orderParam.lever_open_price
          ) {
            ElMessage.error(t("exchange.lessTip1"));
            return;
          }
        } else {
          //止盈价需小于开仓价
          if (
            Number(state.orderParam.stop_win_price) &&
            Number(state.orderParam.stop_win_price) >
              state.orderParam.lever_open_price
          ) {
            ElMessage.error(t("exchange.lessTip2"));
            return;
          }
          //止损价需大于开仓价
          if (
            Number(state.orderParam.stop_lose_price) &&
            Number(state.orderParam.stop_lose_price) <
              state.orderParam.lever_open_price
          ) {
            ElMessage.error(t("exchange.greaterTip2"));
            return;
          }
        }
      }
      if (gettrading.value.lever_max_hand < state.orderParam.lever_hand) {
        ElMessage.error(t("lever.maxhand") + gettrading.value.lever_max_hand);
        return;
      }
      if (gettrading.value.lever_min_hand > state.orderParam.lever_hand) {
        ElMessage.error(t("lever.minhand") + gettrading.value.lever_min_hand);
        return;
      }
      if (state.margin > props.leverInfo.lever_balance) {
        ElMessage.error(t("lever.balanceinsu"));
        return;
      }
      let param = { ...state.orderParam };
      param.stock_id = gettrading.value.id;
      param.lever_schema = props.activeTab;
      param.lever_type = type;
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demostockOrderLeverMakeOrder
        : stockOrderLeverMakeOrder;
      setFun(param)
        .then((res) => {
          state.loading = false;
          if (res.code === 200) {
            state.orderParam = {
              lever_multiple: gettrading.value?.lever_multiple_array[0],
              lever_hand_number: 0,
            };
            emit("refresh");
            emit("placeOrder");
            $store.commit(
              "exchange/SET_STOCK_LEVER_ORDER",
              "股票合约下单" + new Date()
            );
            ElMessage.success(res.message);
          }
        })
        .catch((err) => {
          state.loading = false;
          ElMessage.error(err.message);
        });
    };
    const closeSelect = () => {
      state.isSelect = false;
    };
    // 选择倍数
    const selectMulti = (item) => {
      state.orderParam.lever_multiple = item;
      closeSelect();
    };
    const open = () => {
      loading.value = true;
      stockOrderLeverOpenLever()
        .then((res) => {
          loading.value = false;
          if (res.code === 200) {
            ElMessage({
              type: "success",
              message: res.message,
            });
            let obj = $store.state.user.userInfo;
            obj.user_stock_lever_status = true;
            state.isopenlever = true;
            $store.commit("user/SET_USER_INFO", obj);
            emit("openlever");
          }
        })
        .catch(() => {
          loading.value = false;
        });
    };
    return {
      state,
      transaction,
      gettrading,
      slideChange,
      formatTooltip,
      countSlide,
      trBuyTriggerPrice,
      themeType,
      nullorNot,
      onConfirm,
      onCancel,
      isVerified,
      getConfigInfo,
      jump,
      getSysConfig,
      onTransfer,
      getbalance,
      exceptFix,
      rideFix,
      toPath,
      virtual_wallet,
      closeSelect,
      selectMulti,
      open_stock_contract_trading,
      open,
      loading,
    };
  },
};
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
<style scoped lang="less">
.activetab {
  padding: 8px;
  border-radius: 50px;
}
.cus-select {
  width: 100%;
  // height: 34px;
  border: 1px solid;
  padding: 0 8px;
}
.select-num {
  height: 100%;
  line-height: 32px;
  position: relative;
}
.num-box {
  position: absolute;
  top: 35px;
  right: -8px;
  width: 82px;
  padding: 10px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 100000;
}
.num {
  height: 36px;
  line-height: 36px;
  width: 100%;
}
.num:hover {
  background: #f8f8f8;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-32 {
  margin-bottom: 32px;
}
.mb-13 {
  margin-bottom: 13px;
}
.mb-20 {
  margin-bottom: 20px;
}
.p-5 {
  padding: 0 5px;
}
.btn {
  width: 100%;
  border-radius: 100px;
  height: 36px;
  line-height: 36px;
  margin: 8px 0;
}
.islogin {
  width: 100%;
  height: 36px;
  line-height: 36px;
  // display: block;
}
.lr-5 {
  margin: 0 5px;
}
.border {
  border: 1px solid @blue;
}
.block {
  display: block;
}
.ml-8 {
  margin-inline-start: 8px;
}
.select-num {
  height: 100%;
  line-height: 32px;
  position: relative;
}
.num-box {
  position: absolute;
  top: 35px;
  right: -8px;
  width: 82px;
  padding: 10px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 100000;
}
.num {
  height: 36px;
  line-height: 36px;
  width: 100%;
}
.num:hover {
  background: #f8f8f8;
}
</style>
